<template>
  <div class="hamburger_menu">
    <input type="checkbox" id="toggle" />
    <!-- 点击文字选择了复选框,主要是靠label标签的for属性,for属性对应的是复选框的id属性,值相等就可以通过label标签选择到复选框 -->
    <label for="toggle">
      <div class="hamburger_container">
        <span></span>
        <span></span>
        <!-- <router-link to="/" class="gh">
          <img class="plec" src="../../assets/apple.png" alt="" />
        </router-link>
        <router-link to="/shopping" class="gh">
          <img class="plect" src="../../assets/购物带.png" alt="" />
        </router-link> -->
      </div>
    </label>
    <ul id="navID" class="mainnavlist _mainnavlist">
      <li @click="routerpush('/iphone')">iPhone</li>
      <li @click="routerpush('/ipad')">iPad</li>
      <li @click="routerpush('/mac')">Mac</li>
      <li @click="routerpush('/music')">Muisc</li>
       <!-- <li @click="routerpush('/haha')">haha</li> -->
    </ul>
      <div>
    <router-link to="/" class="gh">
      <img class="plec" src="../../assets/apple.png" alt="" />
    </router-link>
    <router-link to="/shopping" class="gh">
      <img class="plect" src="../../assets/购物带.png" alt="" />
    </router-link>
  </div>
  </div>
</template>

<script>
export default {
  name: "top",
  components: {},
  data() {
    return {
      nalistshowflag: false,
    };
  },
  methods: {
    cheng: function () {
      this.$router.push("/");
    },
    chenge: function () {
      this.$router.push("/");
    },
    routerpush(to) {
      this.$router.push(to);
      // 跳转之后，记得关闭菜单（在屏幕宽度小于800的时候才生效）
      var dom = document.getElementById("navID");
      if (dom.classList.contains("navlistshow")) {
        dom.classList.remove("navlistshow");
      }
    },
    //当屏幕宽度小于800的时候，点击菜单图标，显示隐藏的菜单
    opencaidan() {
      var dom = document.getElementById("navID");

      if (dom.classList.contains("navlistshow")) {
        return;
      }
      dom.classList.add("navlistshow");
    },
    //当屏幕宽度小于800的时候，点击关闭按钮， 关闭菜单
    closecaidan() {
      var dom = document.getElementById("navID");
      if (dom.classList.contains("navlistshow")) {
        dom.classList.remove("navlistshow");
      }
    },
  },
};
</script>
<style>
* {
  /* 初始化 清除页面的内外边距 */
  padding: 0;
  margin: 0;
}

.hamburger_menu {
  /* 宽度占浏览器的可视区域宽度的100% */
  width: 100vw;
  height: 48px;
  background-color: #000;
  z-index: 9999;
}
.plec {
  width: 35px;
  height: 35px;
  position: relative;
  top: -1020px;
  left: 370px;
  /* border: solid 2px red; */
  /* justify-content: center;
  align-items: center; */
}
.plect {
  width: 35px;
  height: 35px;
  position: absolute;
  top: 10px;
  left: 725px;
  /* justify-content: center;
  align-items: center; */
}

.text {
  color: #fff;
  text-align: center;
}
.hamburger_menu #toggle {
  /* 让复选框隐藏 */
  display: none;
}

.hamburger_menu label {
  /* 将行内元素label转为块级元素 ,不然无法设置宽和高 */
  display: block;
  width: 48px;
  height: 48px;
  /* 鼠标移入边小手 */
  cursor: pointer;
}
.hamburger_menu label .hamburger_container {
  /* 相对定位 按照自己的本身位置移动,不会影响父盒子 */
  position: relative;
  top: 17px;
  left: 14px;
  width: 20px;
  height: 20px;
}
.appleicon {
  width: 100px;
  cursor: pointer;
}
.appleicon:hover {
  color: white;
}
.hamburger_menu label .hamburger_container span {
  /* 先让两个重叠在一起 */
  position: relative;
  top: 0;
  /* 还是一样转为块级元素 设置宽和高 */
  display: block;
  height: 1px;
  background-color: #fff;
  /* 在设置取消选中的过渡时间 */
  /* 反之 */
  transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s;
}
/* 设置第二条线 */
.hamburger_menu label .hamburger_container span:nth-child(2) {
  top: 10px;
}
/* 设置转换 */
/* + 是相邻兄弟选择器 找相邻的label */
.hamburger_menu #toggle:checked + label .hamburger_container span:nth-child(1) {
  top: 5px;
  /* 顺时针旋转45度 */
  transform: rotate(45deg);
  /* 设置过渡时间 */
  /* 执行top这个属性,然后0.2s后执行旋转 */
  transition: top 0.2s ease-in-out, transform 0.2s ease-in-out 0.2s;
}
/* 选中后的第二条线 */
.hamburger_menu #toggle:checked + label .hamburger_container span:nth-child(2) {
  top: 5px;
  /* 逆时针旋转45度 */
  transform: rotate(-45deg);
  transition: top 0.2s ease-in-out, transform 0.2s ease-in-out 0.2s;
}
/* 菜单栏 */
.hamburger_menu ul {
  width: 100vm;
  /* 让高度占浏览器可视区域的100% 减去 导航栏的48px */
  height: calc(100vh - 48px);
  padding: 0 50px;
  transform: scaleY(0);
  /* 设置过渡时间 */
  transition: all 0.4s ease-in-out;
  transform-origin: 50% 0;
  background-color: rgba(0, 0, 0, 0.9);
  opacity: 0;
}
.hamburger_menu ul li {
  /* 取消小圆点 */
  list-style: none;
  height: 50px;
  line-height: 50px;
  color: #fff;
  font-size: 18px;
}
/* 给前三条li设置下边框 */
.hamburger_menu ul li:nth-child(-n + 3) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
/* 选中复选框放大到原有高度 */
.hamburger_menu #toggle:checked ~ ul {
  transform: scaleY(1);
  /* 选中后是不透明 */
  opacity: 1;
}
.navlistshow {
  display: block !important;
}
</style>
